<template>
    <div class="panel-main">
        <div class="panel-row">
            <div>标题：</div>
            <Input :value="model?.label" class="panel-input" @change="change($event, 'label')"/>
        </div>
        <div class="panel-row">
            <div>托盘类型：</div>
            <Select :value="model?.routeCode" @change="change($event, 'routeCode', 'select')">
                <Option v-for="(item,index) in routes" :key="index" :value="item.code">{{item.name}}</Option>
            </Select>
        </div>
        <div class="panel-row">
            <div>宽度：</div>
            <Input :value="width" class="panel-input" @change="change($event, 'width')"/>
        </div>
        <div class="panel-row">
            <div>高度：</div>
            <Input :value="height" class="panel-input" @change="change($event, 'height')"/>
        </div>
        <div class="panel-row">
            <div>颜色：</div>
            <Input :value="model?.color" class="panel-input" type="color" @change="change($event, 'color')"/>
        </div>
        <div class="panel-row">
            <div>备注：</div>
            <Textarea/>
        </div>
    </div>
</template>
<script>
    import {Input, Select, Textarea} from "ant-design-vue";
    import {Dictionary} from "../../../utils/Dictionary";
    import {listByMapId} from "../../../api/mapRoute";
    import {listAll as containerList} from '../../../api/container';


    export default {
        name: 'App',
        props: {
            selectedShape: Object
        },
        computed: {
            isDictionary() {
                return this.$store.state.dictionary;
            }
        },
        watch: {
            selectedShape: {
                handler: function (shape) {
                    const item = shape.graph?.findById(shape.itemId);
                    this.model = item?.getModel();
                    this.width = this.model?.size[0];
                    this.height = this.model?.size[1];
                },
                deep: true
            },
            isDictionary(data) {
                this._mapType(data);
            }
        },

        components: {
            Input,
            Select,
            Option,
            Textarea
        },

        data() {
            return {
                model: {},
                width: '',
                height: '',
                carType: [],
                routes: [],
                containers: []
            }
        },

        mounted() {
            this._carType(this.$store.state.dictionary);
            this._mapRoute();
            this._containers();
        },

        methods: {
            change(e, key, type) {
                switch (type) {
                    case 'input':
                        this.setValue(e.target.value, key);
                        break;
                    case 'checkbox':
                        this.setValue(e.target.checked, key);
                        break;
                    case 'select':
                        this.setValue(e, key);
                        break;
                    default:
                        this.setValue(e.target.value, key);
                        break;
                }
                const item = this.selectedShape.graph.findById(this.selectedShape.itemId);
                this.$emit('change', item.getModel());
            },
            
            /**
             * 设置值
             * @param value 
             * @param key 
             */
            setValue(value, key) {
                if (key === 'width' || key === 'height') {
                    this[key] = value;
                    this.model.size[key === 'width' ? 0 : 1] = parseInt(value);
                } else {
                    this.model[key] = value
                }
            },

            /**
             * AGV类型
             * @private
             */
            _carType(data){
                this.carType = data.filter(item => item.code === Dictionary.CAR_TYPE)
                    .map(item => item.children)[0]
            },

            /**
             * 查找路线
             * @private
             */
            _mapRoute(){
                this.selectedShape.graph.map?.id && listByMapId(this.selectedShape.graph.map.id).then(res => {
                    this.routes = res.data;
                })
            },

            /**
             * 查找托盘
             */
            _containers(){
                containerList().then(res => {
                    this.containers = res.data;
                })
            }
        }
    }
</script>
<style scoped lang="scss">

</style>
